在進入元件的詳細介紹之前,先來了解一下建立元件的概念。為什麼現代前端框架都強調元件化的開發方式呢?
最主要是關注點分離 Separation of Concenrs
的概念,在剛開始建立專案時,可能只有一個頁面或功能,其實不太會感覺到元件化的好處,但隨著應用程式越來越複雜,若將所有的程式碼都寫在一起,會變得難以維護和擴展。
透過元件化,將 UI 切割成多個元件,讓每個元件只關注一個特定的功能或任務,可以提高元件的可重用性和可維護性。此外,Angular 會將所有元件組成一棵「元件樹」,每個元件都是樹上的一個節點,彼此之間可以清楚地分工與協作。
每個元件通常包含以下檔案:
<元件名稱>.component.ts
:元件的 TypeScript 檔案,包含元件的邏輯和行為。<元件名稱>.component.html
:元件的 HTML 模板檔案,定義元件的視覺結構。<元件名稱>.component.css
或 <元件名稱>.component.scss
:元件的樣式檔案,用於定義元件的外觀。<元件名稱>.component.spec.ts
:測試檔案,用於單元測試。檔案命名慣例
- Angular 20 版本前的元件檔案命名規則,慣例會用
<元件名稱>.component.<file-type>
來命名。- Angular 20 版本後的元件檔案命名規則,則會省略
.component
,直接使用<元件名稱>.<file-type>
。
接下來以 App.ts 為範例,來了解元件的基本結構,會有 @Component
裝飾器 (Decorator) 和元件類別 (Class),這兩個關鍵核心。
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
imports: [RouterOutlet],
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
protected title = 'angular-demo-todo';
}
@Component
是一個 TypeScript 裝飾器 (Decorator),用來定義一個 Angular 元件。它接受一個物件作為參數,這個物件包含了元件的各種設定和屬性。會在編譯成 JavaScript 時,將這些設定應用到元件類別上。
而這個裝飾器中必備的屬性有 selector
和 template
。
selector
是 Angular 元件的核心屬性之一,用於定義元件在 HTML 中的標籤名稱。
selector
設定為 app-header
,則可以在 HTML 中使用 <app-header></app-header>
來引入這個元件。app-<元件名稱>
命名外,可以使用自訂的選擇器名稱。
.app-header
、header[appHeader]
<app-header></app-header>
<header appHeader></header>
<header class="app-header"></header>
定義元件的 HTML 模板。
templateUrl
引用模板檔案路徑,會在檔案內部會放入元件的結構和內容,template
屬性,使用反引號包裹多行 HTML。template: '<h1>Welcome to {{ title }}!</h1>'
templateUrl: './app.html',
定義元件的樣式
styleUrl
是用來指定元件的 CSS 樣式檔案路徑。styleUrls
屬性可以接受一個字串陣列,包含多個樣式檔案。styles: [`
p {
color: blue;
}
`]
styleUrls: ['./btn.component.css','./btn-2.component.css']
styleUrl: './app.css'
多數情況下,都不會將模板、樣式直接寫在組件中,除非是非常簡單的元件。
imports
屬性是用來引入其他 Angular 模組或元件,以便在當前元件中使用它們的功能。
imports
中引入的模組或元件,才能在當前元件的模板中使用。imports: [HeaderComponent],
Class 主要用來定義元件的邏輯和行為,是 JavaScript 的類別,使用方式基本上非常相似,像是可以使用 protected 和 private 等修飾詞來用來控制屬性或方法的存取範圍。之後會再詳細介紹在 Angular 中元件類別的各種用法與技巧。
目前 Angular 支援兩種元件開發方式:基於模組的元件和獨立元件,而獨立元件是目前官方推薦的方式。
獨立元件是指不需要依賴模組 (Module) 來註冊和使用的元件。
imports
屬性來引入所需的模組或其他元件。而要建立獨立元件需要使用 Angular 14 引入的一個新功能 standalone
,可以在裝飾器中,設定 standalone
屬性來定義是否是一個獨立元件。
standalone: true
,不需要再特別設定,在之前的版本中需要加入這個設定。@Component({
...
standalone: true, // Angular 19 前的版本需手動定義為獨立元件
})
使用 Angular CLI 可以快速建立元件,並自動生成相關的檔案和程式碼。
ng generate component
(ng g c
) 建立元件。ng generate component <元件名稱>
ng g c <元件名稱> // 簡寫
ng g c <資料夾結構/元件名稱> // 在指定資料夾下建立元件
若是在建立元件時不想自動生成測試檔案,可以在指令中加上 --skip-tests
參數。
ng g c <元件名稱> --skip-tests // 不建立測試檔案
或是到 angular.json 中的 schematics 加上這段設定,可以讓你在使用 Angular CLI 快速生成指令時,自動套用
{
"projects": {
"<project-name>": {
...
"schematics": {
"@schematics/angular:component": { "type": "component" , skipTests: true },
},
...
}
這系列文章預計會實作兩個專案,會在每個章節中,搭配當前學習到的內容,來陸續完成專案。
第一個專案是 ToDo List 👅 | Figma,樣式部分之後會提供個人版本給大家參考,讓大家可以專注在 Angular 的學習上。
專案實作部分會提供個人思路,不會詳細寫出每個步驟,方便大家練習和思考,也會提供完整程式碼參考,讓大家可以對照和學習。
今天的目標是建立專案和第一個元件 Header。
ng g c
指令,建立 Header 元件透過這篇文章,我們了解了 Angular 元件的基本概念和結構,並學會如何使用 Angular CLI 快速建立元件。
下一章,將介紹模組,探討以前的模組化開發方式,和現在獨立元件的差異。